<template>
  <div class="page">
    <!--    //需要根据 课程状态判断是否显示-->

    <div class="bgf" style="padding: 30rpx 40rpx">
      <div style="color: pink">请求接口状态判断是否显示</div>   <h2 style="color: #007aff">岗前能力认证</h2>
      <div>您需要按照指引完成以下任务，感谢您的配合！</div>
    </div>
    <div class="f bgf ac xb w100 mt20r">
      <img src="" alt="图片占位" style="height: 200rpx;width: 200rpx">
      <div class="f  cn f1 ml20r" style="padding: 10rpx 0">
        <div class="fs40r b"> ?????培训</div>
        <div class="f ac ">
          <div class="ga0">时长：</div>
          <div>180分钟</div>
        </div>
        <div class="f ac ">
          <div class="ga0">期限：</div>
          <div>无</div>
        </div>
        <div class="f ac ">
          <div class="ga0">状态：</div>
          <div style="color: #007aff">未参加</div>
        </div>
      </div>
    </div>
    <div class="bgf mt20r w100 borderBox" style="padding: 20rpx 5rpx">
      <div class="f ac mb20r">
        <div style="width: 8rpx;height: 30rpx;background-color: #007aff"></div>
        <div class="b ml10r">测评简介：</div>
      </div>
      <div style="padding: 10rpx 5rpx">请新技师学习《服务态度及高压红线培训》课程后，完成相应考试，方可上线接单。</div>
    </div>
    <div class="bgf mt20r w100 borderBox f ac xb" style="padding: 20rpx 5rpx">
      <div>
        <div class="f ac mb20r">
          <div style="width: 8rpx;height: 30rpx;background-color: #007aff"></div>
          <div class="b ml10r">学习课程：</div>
        </div>
        <div style="padding: 10rpx 5rpx;color: #007aff">服务态度及高压红线培训</div>
      </div>
      <div @click="goStudy" style="background-color: #007aff;width: 100rpx;height: 100rpx"
           class="gf rds15r f xc ac mr20r">
        点击 <br/>学习
      </div>
    </div>
    <div class="bgf mt20r w100 borderBox" style="padding: 20rpx 5rpx">
      <div class="f ac mb20r">
        <div style="width: 8rpx;height: 30rpx;background-color: #007aff"></div>
        <div class="b ml10r">通过标准：</div>
      </div>
      <div class="f ac ml10r">
        <div class="ga0">及格分数：</div>
        <div>80分（总分100分）</div>
      </div>
      <div class="f ac mt10r ml10r">
        <div class="ga0">奖励积分：</div>
        <div>8分</div>
      </div>
    </div>
    <button @click="goQuestion" class=" fixed w90 b9 l50"
            style="background-color: #007aff;color: white;transform: translateX(-50%)">
      进入
    </button>
    <div class="" style=" padding: 20rpx;">
      <button @click="check" class=" fixed w90 b2 l50"
              style="background-color: #007aff;color: white;transform: translateX(-50%)">
        开始考核
      </button>
    </div>
    <u-modal :show="show" title="温馨提示" content='您需要先学习完课程成后才能开始考试' confirmText="开始学习"
             :closeOnClickOverlay="true"
             @close="show = false" @confirm="goStudy"></u-modal>
  </div>
</template>

<script>

export default {
  name: '',
  components: {},
  data() {
    return {
      show: false
    };
  },
  computed: {},
  mounted() {
    //
  },
  methods: {
    check() {
      // if (){}
      this.show = true;

    },
    goStudy() {
      uni.navigateTo({
        url: '/pages/webView/index'
      })
    },
    goQuestion() {
      uni.navigateTo({
        url: '/pages/authentication/testQuestions'
      })
    }
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 20rpx;
  background-color: #f5ecf3;
  min-height: 100vh;
}
</style>
